<template>
    <div class="photo-card">
        <img :src="baseUrl + photo.src" alt="" class="photo-image">
        <div class="photo-mook"  @click="toDetail"></div>
        <div class="photo-like" @click="clickLike">
            <span class="iconfont icon-aixin1" :class="{ isLike:photo.isLike[0].count > 0 }"></span>
            <span class="like-data">{{ photo.like[0].count }}</span>
        </div>
    </div>
</template>


<script>
    //
    import { label,cardColor } from '@/utils/data.js'
    //
    import config from '@/utils/env.js'
    const baseUrl = config.baseUrl;
    //
    import { insterFeedbackApi } from '@/api/index.js'
    export default {
        data() {
            return {
                label,
                cardColor,
                baseUrl,
                user: this.$store.state.user
            }
        },
        props: {
            photo: {
                default: {}
            }
        },
        computed: {
            card() {
                return this.photo
            }
        },
        created() {
            // console.log(this.photo);
            
        },
        methods: {
            // 显示详情
            toDetail() {
                this.$emit('toDetail')
            },

            // 点击喜欢
            clickLike() {
                if(this.card.isLike[0].count == 0) {
                    let data = {
                        waallId: this.card.id,
                        userId: 32,
                        type: 0,
                        moment: new Date()
                    }
                    insterFeedbackApi(data).then(() => {
                        this.card.like[0].count++;
                        this.card.isLike[0].count++
                    })
                }
            }
        }
    }

</script>


<style lang="less" scoped>
    .photo-image {
        width: 100%;
    }

    .photo-card {
        width: 100%;
        position: relative;
        cursor: pointer;
        user-select: none;
    }

    .photo-card:hover {
        .photo-mook {
            opacity: 1;
        }
        .photo-like {
            opacity: 1;
            .isLike {
                color: @like;
            }
        }
    }

    .photo-mook {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        background-color: rgba( 0, 0, 0, .2);
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: all .3s ease-in-out;
    }

    .photo-like {
        width: 56px;
        height: 28px;
        border-radius: 14px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
        position: absolute;
        left: 10px;
        top: 10px;
        opacity: 0;
        transition: all .3s ease-in-out;
    }

    .icon-aixin1 {
        color: @gray-2;
    }

    .like-data {
        font-size: @font-size-14;
        margin: 0 0 0 4px;
        color: @gray-1;
    }

    .isLike {
        color: @like;
    }
</style>